<template>
   <div>
      <el-dialog
          :title="formListTitle"
          :visible="Visible"
          width="50%"
          :modal-append-to-body='false'
          append-to-body
          custom-class="dialog"
          :destroy-on-close='true'
          @close='canceldialog'
          :close-on-click-modal='false'
          :close-on-press-escape='false'
          :center='true'
        >
        <el-form 
          :model="formListData"
          :rules="rule"
          ref="sysPersonForm"
          :inline='false'
          label-width="100px"
        >
        <el-form-item label="账号"  prop="username">
           <el-input v-model="formListData.username" autocomplete="off" :style="{width: '95%'}"></el-input>
        </el-form-item>
        <el-form-item label="密码"  prop="password" v-if="!editMark">
           <el-input v-model="formListData.password" autocomplete="off" type="password" :style="{width: '95%'}"></el-input>
        </el-form-item> 
        <el-form-item label="姓名"  prop="name">
           <el-input v-model="formListData.name" autocomplete="off" maxlength="12" :style="{width: '95%'}"></el-input>
        </el-form-item>
         <el-form-item label="手机号"  prop="mobilePhoneNumber">
           <el-input v-model="formListData.mobilePhoneNumber" autocomplete="on"  :style="{width: '95%'}"></el-input>
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
            <el-select v-model="formListData.sex" placeholder="请选择性别" :style="{width: '95%'}">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="角色名称"  prop="role">
            <el-select v-model="formListData.role" placeholder="请选择角色" value-key='objectId' :style="{width: '95%'}">
              <el-option
                v-for="item in selectList"
                :key="item.value.objectId"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
            <el-switch
              v-model="formListData.isEnable"
              active-color="#67C23A"
              inactive-color="#C0C4CC">
            </el-switch>
        </el-form-item>
        </el-form>
          <span slot="footer">
            <el-button @click="canceldialog">取 消</el-button>
            <el-button type="primary" @click="handelConfirm('sysPersonForm')" :loading="isloading">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import validator from '@/utils/validator'
export default {
  props: {
      Visible:Boolean,
      editMark:Boolean,
      listData:Object,
      roleList:Array
  },
  components: {
  },
  data() {
    return {
        title:'',
        options: [],
        isloading:false,
        formData: {
          isEnable:false
        },
        sexOptions: [
          {
              value:true,
              label:'男'
          },{
              value:false,
              label:'女'
          }
      ],
      
       rule:{
        username:[
          { required:true,trigger:'change',message:'请输入账号'}
        ],
        password:[
          { required:true,trigger:'change',message:'请输入6-12位密码',min: 6, max: 12}
        ],
        name:[
          { required:true,trigger:'change',message:'请输入姓名'}
        ],
        role:[
          { required:true,trigger:'change',message:'请选择角色类型'}
        ],
         sex:[
        { required:true,trigger:'change',message:'请选择性别'}
        ],
        mobilePhoneNumber:[
        { required:true,trigger:'change',message:'请输入正确的手机号',validator: validator.validatePhone}
        ]
      },

    };
  },
  computed: {
      selectList(){
          return this.options=this.roleList.map(item=>{
              return { value:{ objectId:item.objectId,rolename:item.roleName},label:item.roleName}
          })
      },
      formListData(){
          if(this.editMark){
              this.formData = this.listData
              return this.formData
          }
          return this.formData
      },
      formListTitle(){
          if(this.editMark){
              return this.title = '编辑'
          }
          return this.title = '新增'
      }
  },
  mounted() {
  },
  beforeDestroy() {
      this.$off()
  },
  methods: {
      canceldialog(){
          this.$emit('close')
      },
      handelConfirm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid&&!this.isloading) {
              this.isloading=true
              this.editMark?this.saveData(true):this.saveData(false)
            } else {
                this.$utils.message.warning(this,'请填写完整信息')
                return false;
            }
        });
         
      },

       saveData(flag){
        let id = flag?this.listData.objectId:null
        let t = setTimeout(() => {
          this.$http.saveUserData(this,id,this.formData,flag)
          .then(success=>{
            this.isloading=false
            clearTimeout(t)
            this.$emit('save')
            this.$emit('close')
          
          })
          .catch(error=>{
            console.log(error);
            this.isloading=false
            clearTimeout(t)
        })
        }, 500);
      },
      // saveData(){
      //   this.$Bmob.User.register(this.formData).then(res => {
      //       console.log(res)
      //       this.isloading=false
      //       this.$emit('save')
      //       this.close()
      //       this.$utils.message.success(this,'保存成功')
      //   }).catch(err => {
      //       console.log(err)
      //       this.$utils.message.warning(this,'保存失败')
      //       this.isloading=false
      //   });
      // },

      // updateData(){
      //   this.$http.updateUserData(this,this.formData,this.listData.objectId)
      //   .then(res=>{
      //       this.isloading=false
      //       this.$emit('save')
      //       this.close()
      //       console.log(res);
      //   }).catch(err=>{
      //       this.isloading=false
      //   })
      // }
  
  },
};
</script>

<style scoped lang="scss">

/deep/.el-dialog {
      border-radius: 15px;
      z-index: 5;
      text-align: center;
      min-width: 320px;  
      margin-top: 5vh !important;
}





</style>
